<template>
	<div class="header-container">
		<div class="l-content">

			<el-button icon="el-icon-menu" size="mini"></el-button>
			<span class="text">首页</span>
		</div>
		<div class="r-content">
			<el-dropdown>
				<span class="el-dropdown-link">
					<img src="@/assets/header.png">
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item>个人中心</el-dropdown-item>
					<el-dropdown-item @click.native="dialogFormVisible = true">修改密码</el-dropdown-item>
					<el-dropdown-item @click.native="logout">退出</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
		<el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="30%">
			<el-form :model="form">
				<el-form-item label="原密码" :label-width="formLabelWidth">
					<el-input type="password" v-model="form.originalpwd" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="修改密码" :label-width="formLabelWidth"> 
					<el-input type="password" v-model="form.updatepwd" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" :label-width="formLabelWidth">
					<el-input type="password" v-model="form.confirmpwd" autocomplete="off"></el-input>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="changePwd">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import Cookies from 'js-cookie'
	import {
		mapState
	} from 'vuex'
	import {
		updatePwd
	} from '@/api/user.js'

	export default {
		data() {
			return {
				dialogFormVisible: false,
				formLabelWidth: '80px',
				form: {
					originalpwd: '',
					updatepwd: '',
					confirmpwd: ''
				}
			}
		},
		methods: {
			async updatePassword(params) {
				await updatePwd(params).then((data) => {
					if (data.status === 200) {
						this.$message.success("修改密码成功请重新登录！")
						setTimeout(() => {
							Cookies.remove('token')
							this.$router.push('login')
						}, 1000);
					}
				})
			},
			changePwd() {
				if (this.form.updatepwd !== this.form.confirmpwd) {
					this.$message.error("两次输入的密码不一致！")
					return
				}
				if (this.form.originalpwd !== this.userInfo.password) {
					this.$message.error("请输入正确的密码！")
					return
				}
				this.$set(this.form,"useq",this.userInfo.useq)
				this.updatePassword(this.form)

			},
			logout() {
				console.log("登陆场")
				Cookies.remove('token')
				this.$router.push('login')
			}
		},
		computed: {
			...mapState(['token', 'isAuth', 'userInfo'])
		}
	}
</script>

<style lang="less" scoped>
	.header-container {
		padding: 0 20px;
		background-color: #333;
		height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.text {
			color: #fff;
			font-size: 16px;
			margin-left: 10px;
		}
	}

	.r-content {
		img {
			width: 40px;
			height: 40px;
			border-radius: 50%;
		}
	}
</style>